<script setup lang="ts">
import { data, complexData, treeNodeIconsData } from './demo-data';
import { ref } from 'vue';

/** 是否支持选择节点，默认为false */
const selectable = ref(true);

/** 是否自动选择子节点，默认为true */
const autoCheckChildren = ref(true);

/** 返回值是否只优先展示父节点, 默认为false */
const cascade = ref(false);

/** 是否显示展示图标，默认为false */
const showTreeNodeIcons = ref(false);

/** 是否显示展示线，默认为false */
const showLines = ref(true);

/** 连接线颜色 */
const lineColor = ref('#888382');

/** 单元格高度 */
const cellHeight = ref(28);

const treeviewComponentInstance = ref<any>();

let identityNumber = complexData.length;

function createNewDataItem() {
    // 注：由于此处直接取原有的数据长度为id，所以不能在删除数据后再验证新增，否则会因id过长报错
    // 改变数据长度时，需要相应的改变parent
    // 注：由于此处直接取原有的数据长度为id，所以不能在删除数据后再验证新增，否则会因id过长报错
    // 改变数据长度时，需要相应的改变parent
    identityNumber++;
    return {
        id: '' + identityNumber,
        avatar: 'newValueHERE!',
        code: '',
        name: 'newValueHERE!',
        fullName: 'newValueHERE!',
        status: '',
        description: 'Created the farris vue project',
        booleanField1: false,
        booleanField2: false,
        dateField1: '2022/11/20',
        dateField2: '2018/01/02',
        datetimeField1: '2022/11/20 23:04:00',
        datetimeField2: '2008/07/08 18:00:00',
        enumField1: 'enable',
        enumField2: '01',
        numericField1: 0,
        numericField2: 0,
        customField1: '',
        customField2: '',
        customField3: '',
        parent: '19',
        layer: 4
    } as any;
}

function removeDataItem() {
    const deleteIndex = (document?.getElementById('deleteIndex') as HTMLInputElement).value || 0;
    treeviewComponentInstance.value.removeDataItem(deleteIndex);
}

function editDataItem() {
    const newName = (document?.getElementById('editName') as HTMLInputElement)?.value || 'demoName!';
    let editIndex = (document?.getElementById('editIndex') as HTMLInputElement).value || 0;
    if (Number(editIndex) >= complexData.length || Number(editIndex) <= 0) {
        editIndex = 1;
    }
    treeviewComponentInstance.value.editDataItem(editIndex, newName);
}

function addDataItem() {
    treeviewComponentInstance.value.addNewDataItem();
}
</script>

<template>
    <div class="fv-tree-view-total">
        <div class="fv-tree-view-demo">
            <f-tree-view
                ref="treeviewComponentInstance"
                :data="complexData"
                :tree-node-icons-data="treeNodeIconsData"
                :selectable="selectable"
                :auto-check-children="autoCheckChildren"
                :cascade="cascade"
                :show-lines="showLines"
                :show-tree-node-icons="showTreeNodeIcons"
                :line-color="lineColor"
                :cell-height="cellHeight"
                :new-data-item="createNewDataItem()"
            ></f-tree-view>
        </div>
        <div class="fv-tree-view-intepretation">
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" v-model="selectable" class="custom-control-input" id="selectable" />
                <label class="custom-control-label" for="selectable">selectable: 可勾选</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" v-model="autoCheckChildren" class="custom-control-input" id="autoCheckChildren" />
                <label class="custom-control-label" for="autoCheckChildren">autoCheckChildren: 选择父节点自动勾选子节点</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" v-model="cascade" class="custom-control-input" id="cascade" />
                <label class="custom-control-label" for="cascade">cascade： 返回值优先展示父节点</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" v-model="showTreeNodeIcons" class="custom-control-input" id="showTreeNodeIcons" />
                <label class="custom-control-label" for="showTreeNodeIcons">showTreeNodeIcons: 显示图标集</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" v-model="showLines" class="custom-control-input" id="showLines" />
                <label class="custom-control-label" for="showLines">showLines: 显示展示线</label>
            </div>
            <!-- <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" v-model="allUnfold" class="custom-control-input" id="allUnfold" />
                <label class="custom-control-label" for="allUnfold">allUnfold: 全部展开或折叠</label>
            </div> -->
            <!-- <div>lineColor: 展示线颜色 <input id="lineColor" value="red" /></div> -->
            <div style="padding: 5px">
                API验证 (注：由于此处仿api验证逻辑，id暂时取原始数据长度，所以不能在删除数据后再验证新增，支持单独单次刷新后验证)
            </div>
            <div>
                <div style="padding: 5px">1. 在数据最后新增：<input @click="addDataItem" type="button" value="新增" /></div>
            </div>
            <div>
                <div style="padding: 5px">2. 请填写编号后点击删除：<input @click="removeDataItem" type="button" value="删除" /></div>
                <div style="padding: 5px">请输入想要删除的编号：<input id="deleteIndex" value="4" /></div>
            </div>
            <div>
                <div style="padding: 5px">3. 请填写编号和名称后点击编辑：<input @click="editDataItem" type="button" value="编辑" /></div>
                <div style="padding: 5px">请输入想要修改的名称：<input id="editName" value="demoName!" /></div>
                <div style="padding: 5px">请输入想要修改的编号：<input id="editIndex" value="1" /></div>
            </div>
        </div>
    </div>
</template>
<style>
.f-tree-view-btn input {
    margin: 5px;
}
.fv-tree-view-demo {
    width: 270px;
    overflow: scroll;
    min-width: 240px;
    border: 1px solid black;
}

.fv-tree-view-intepretation {
    width: 50%;
    margin-left: 20px;
}
.fv-tree-view-total {
    display: flex;
    min-width: 600px;
}
</style>
